@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

/*指定容器的大小*/
html,
body,
.layout {
  height: 100%;
  width: 100%;
}

/*主容器*/
.layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #f8f8f8;
  /*面包屑*/
  /*二级面包屑*/
  /*内容区域*/
}

.layout .layout-header {
  margin: 10px;
  height: 40px;
  line-height: 40px;
  background: #fff;
}

.layout .layout-header-second {
  /*解决margin-top高度的问题*/
  margin: 0 10px 10px 10px;
  height: 40px;
  line-height: 40px;
  background: #fff;
}

.layout .layout-content {
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
  margin: 0 0 10px 10px;
  height: 100%;
  /*内容与导航栏对调位置*/
}

.layout .layout-content > div {
  background: #fff;
}

.layout .layout-content .layout-content-nav {
  width: 200px;
  overflow: auto;
}

.layout .layout-content .layout-content-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 10px;
}

.layout .layout-content .layout-content-list-reverse {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 0px;
}

.layout .layout-content .layout-content-nav-reverse {
  width: 200px;
  overflow: auto;
  margin: 0 10px;
}

.layout .layout-content .layout-content-list-left {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0px;
  width: 60%;
  box-shadow: #ccc 0px 0px 5px;
}

.layout .layout-content .layout-content-list-right {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 10px;
  box-shadow: #ccc 0px 0px 5px;
}

.layout .layout-content .layout-content-list-right .layout-content-list-right-split {
  height: 49%;
  margin-right: 0px;
  overflow-y: auto;
  box-shadow: #ccc 0px 0px 2px;
}
